<template>
  <div id="app">
    <van-nav-bar :title="$route.meta.title" rightText="登录" @click-right="onClickRight" />
    
    
      <div class="wrap">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive">
            <!-- 这里是会被缓存的视图组件 -->
          </router-view>
        </keep-alive>

        <router-view v-if="!$route.meta.keepAlive">
          <!-- 这里是不被缓存的视图组件 -->
        </router-view>
      </div>
    

    <van-tabbar v-model="active">
      <van-tabbar-item icon="wap-home" replace to="index">主页</van-tabbar-item>
      <van-tabbar-item icon="records" info="5" replace to="faxian">发现</van-tabbar-item>
      <van-tabbar-item icon="gold-coin" info="20" replace to="wode">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: 'app',
  data () {
    return {
      active: 0
    }
  },
  methods: {
    onClickRight () {
      this.$router.push({path: '/login'})
    }
  }
}
/* eslint-disable */
</script>

<style lang="less">
  @import url('./assets/less/reset.less');
  @import url('./assets/less/base.less');
  @import url('./assets/less/common.less');

  html, body, #app {
    height: 100%;
  }

  #app {
    display: flex;
    flex-direction: column;

    .wrap {
      flex: 1;
      // height: 100%;
      margin-bottom: 50px;

      overflow-y: auto;
      overflow-x: hidden;
    }
  }
</style>
